iT邦幫忙

1

CSS MediaQuery小記

css
  • 分享至 

  • xImage
  •  

media type

  • all 所有裝置 (此為默認值,可省略不寫)
  • screen 螢幕裝置
  • print 印刷裝置
  • speech 朗讀裝置
    @media print {
      /* 印刷裝置用,通常會關閉動畫 & hover */
    }

方向 orientation

  • landscape (寬>高) 橫屏
  • portrait (高>寬) 豎屏

逗號判斷

  • 逗號 代表 or (表任一符合即套用)
  @media (min-width: 700px), handheld and (orientation: landscape) { ... }

HTML 載入不同的CSS檔

<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">

基礎 media mixin 使用

  $media-md: 768px;
  @mixin media-md() {
    // 大於 768px 套用
    @media all and (min-width: $media-md) {
      @content;
    }
  }
  
  // 可以寫於元件之下
  .test {
    @include media-md{  
      border: 1px solid red;
    };
  }
  
  // 亦可統一管理同一個條件下的樣式
  @include media-md{  
    .test2 {
      background-color: green;
    }
  };

代入變數

  • mixin 代入變數的版本
  • 可用 up / down / between
$media-md: 768px;
$media-xs: 576px;

@mixin media-bp-up($width) {
  @media all and (min-width: $width) {
    @content;
  }
}

@mixin media-bp-down($width) {
  @media all and (max-width: $width) {
    @content;
  }
}

@mixin media-bp-between($min-w,$max-w) {
  @media all and (min-width: $min-w) and (max-width: $max-w){
    @content;
  }
}
  • 使用
// 可寫於元件之下
.test {
  // 大於 768px 
  @include media-bp-up($media-md){ 
    color: red;
  };
  // 小於 768px 
  @include media-bp-down($media-md){ 
    border: 1px solid blue;
  };
  // xs(576) & md(768) 之間
  @include media-bp-between($media-xs,$media-md){
    background-color: #eee;
  };
}
// 亦可統一管理同一個條件下的樣式
@include media-bp-down($media-md){  
  .test2 {
    background-color: green;
  }
};

參考資料

CodePenPlayGround
CSS Media Queries 詳細介紹
[CSS] Media Query
MDN


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言